<template>
  <el-dialog
    v-model="show"
    title="审核费用"
    width="80%"
    modal-class="finacial-dailog"
  >
    <div style="height: 100%">
      <div class="from-container">
        <AppSearchForm @submit="getList()" @reset="reset()">
          <el-row>
            <el-col :span="6">
              <el-form-item label="开航日期">
                <el-date-picker
                  v-model="sailTime"
                  type="daterange"
                  range-separator="~"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  style="width: 100%"
                  size="small"
                  value-format="YYYY-MM-DD"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="装箱日期">
                <el-date-picker
                  v-model="packingTime"
                  type="daterange"
                  range-separator="~"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  style="width: 100%"
                  size="small"
                  value-format="YYYY-MM-DD"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="业务编号">
                <el-input
                  v-model="query.BussinessNo"
                  clearable
                  placeholder=" "
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="提单号">
                <el-input
                  v-model="query.BlNo"
                  clearable
                  placeholder=" "
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="发票号">
                <el-input
                  v-model="query.InvoiceNo"
                  clearable
                  placeholder=" "
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="费用类型">
                <el-select
                  v-model="query.Feename"
                  placeholder="请选择费用类型"
                  style="width: 100%"
                  filterable
                  clearable
                  remote
                  :remote-method="getFeeType"
                  :loading="feenameLoading"
                >
                  <el-option
                    v-for="item in feenameList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="对账单号">
                <el-input
                  v-model="query.FinaceCode"
                  clearable
                  placeholder=" "
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="对销冲账">
                <el-checkbox
                  v-model="checkIsIncome"
                  style="margin-top: 2px"
                  label=" "
                  size="small"
                  @change="getList"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </AppSearchForm>
      </div>
      <div class="btn-box">
        <el-button type="default" icon="RefreshRight" @click="getList">
        </el-button>
        <el-button type="primary" @click="selectClose"> 选择并关闭 </el-button>
      </div>
      <AppPageTable
        stripe
        :data="tableData.data"
        @change="getList"
        :height="'400'"
        :option="tableData.option"
        @update:option="upDataOption"
        v-loading="tableDataLoading"
        :row-class-name="rowStyle"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
          fixed="left"
        />
        <el-table-column width="60" label="序号" type="index" fixed="left">
        </el-table-column>
        <el-table-column
          prop="balanceDoccode"
          label="对账单号"
          width="100"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column width="100" label="收付款类型">
          <template #default="scope">
            {{ scope.row.isIncome ? "收款" : "付款" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="doccode"
          width="130"
          label="业务编号"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="recDate" label="接单日期" width="100">
        </el-table-column>
        <el-table-column prop="etd" label="开航日期" width="100">
        </el-table-column>
        <el-table-column
          prop="blNo"
          label="提单号"
          width="100"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="feeName"
          label="费用类型"
          width="100"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="price"
          label="单价"
          width="100"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="digit"
          label="数量"
          width="100"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="totalmoney"
          label="金额"
          width="100"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="natMoney"
          label="折人民币"
          width="100"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="getUnVerificationMoney"
          label="未销金额"
          width="100"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="getVerificationMoney"
          label="已销金额"
          width="100"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="currency"
          label="币种"
          width="100"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="invoiceCode"
          label="发票号"
          width="100"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="entFullname"
          label="结算对象名称"
          width="200"
          show-overflow-tooltip
        >
        </el-table-column>
      </AppPageTable>
      <FinacialTotal
        :totalCountOfPay="totalCountOfPay"
        :isFeeCount="false"
      ></FinacialTotal>
    </div>
  </el-dialog>
</template>

<script>
import { defineComponent } from "vue";
import AppSearchForm from "@/components/AppSearchForm.vue";
import AppPageTable, { useTableOption } from "@/components/AppPageTable2";
import FinacialTotal from "./FinacialTotal.vue";
import dayjs from "dayjs";
import { ElMessage } from "element-plus";
import vueBus from "@/utils/vueBus";
export default defineComponent({
  components: {
    AppSearchForm,
    AppPageTable,
    FinacialTotal,
  },
  props: {
    doctype: {
      type: Number,
      default: 0,
    },
  },
  computed: {
    // 开航日
    sailTime: {
      get: function () {
        return [this.query.StartEtd, this.query.EndEtd];
      },
      set: function (val) {
        if (val) {
          this.query.StartEtd = val[0];
          this.query.EndEtd = val[1];
        } else {
          this.query.StartEtd = "";
          this.query.EndEtd = "";
        }
      },
    },
    // 装箱日期
    packingTime: {
      get: function () {
        return [this.query.StartPackTime, this.query.EndPackTime];
      },
      set: function (val) {
        if (val) {
          this.query.StartPackTime = val[0];
          this.query.EndPackTime = val[1];
        } else {
          this.query.StartPackTime = "";
          this.query.EndPackTime = "";
        }
      },
    },
  },
  watch: {},
  data() {
    return {
      show: false,
      //表格数据
      tableData: {
        data: [],
        option: useTableOption(),
      },
      tableDataLoading: false,
      // 查询条件
      query: {
        // 起始开航日
        StartEtd: "",
        // 截止开航日
        EndEtd: "",
        // 开始装箱日
        StartPackTime: "",
        // 结束装箱日
        EndPackTime: "",
        // 结算对象Id
        EntId: "",
        // 币种
        Currency: "",
        // 收支类型 0 付款 1 收款
        IsIncome: this.doctype,
        // 业务编号
        BussinessNo: "",
        // 提单号
        BlNo: "",
        // 对账单号
        FinaceCode: "",
        // 费用名称
        Feename: "",
        // 发票号
        InvoiceNo: "",
        // 审核状态 0未审 1已审
        CheckStatus: 1,
        // 费用类型
        FeeType: 0,
      },
      // 对销冲账
      checkIsIncome: false,
      checkStatusList: [
        {
          label: "演示",
          value: 0,
        },
        {
          label: "已审",
          value: 1,
        },
      ],
      //费用类型
      feenameList: [],
      feenameLoading: false,
      // 合计
      totalCountOfPay: {
        // 代销
        unVerificationMoney: 0,
        // 实际到账
        verificationMoney: 0,
        // 选中合计
        selctficationMoney: 0,
      },
    };
  },
  methods: {
    // 打开Currency:销账币别，EntId结算对象ID，实际到账金额,feeType:费用类型
    open(Currency, EntId, sumtotalmoney, feeType) {
      this.reset("call");
      this.tableData.data = [];
      this.tableData.option.selected = [];
      this.query.Currency = Currency;
      this.query.EntId = EntId;
      this.totalCountOfPay.verificationMoney = sumtotalmoney
        ? sumtotalmoney
        : 0;
      this.show = true;
      this.query.FeeType = feeType ? feeType : 0;
      this.getList();
    },
    // 获取费用类型
    async getFeeType(val) {
      this.feenameLoading = true;
      let res = await this.$http.get("/api/base/feetype/query", {
        KeyWords: val,
      });
      res.content.forEach((item) => {
        item.label = item.feeName;
        item.value = item.feeName;
      });
      this.feenameList = res.content;
      this.feenameLoading = false;
    },
    // 重置
    reset(isCall) {
      const notReset = ["Currency", "EntId", "CheckStatus"];
      let queryKeys = Object.keys(this.query);
      for (const item of queryKeys) {
        if (notReset.indexOf(item) === -1) {
          this.query[item] = "";
        }
      }
      this.query.CheckStatus = 1;
      this.query.FeeType = 0;
      this.checkIsIncome = false;
      this.tableData.option.page = 1;
      if (!isCall) {
        this.getList();
      }
    },

    //字体颜色
    rowStyle({ row }) {
      //
      if (row.isIncome == 0 && this.checkIsIncome) {
        return "colorRed";
      } else if (row.isIncome == 1 && this.checkIsIncome) {
        return "colorGreen";
      } else {
        return "";
      }
    },

    // 列表数据
    async getList() {
      this.tableDataLoading = true;
      this.totalCountOfPay.unVerificationMoney = 0;
      this.totalCountOfPay.selctficationMoney = 0;
      this.totalCountOfPay.verificationMoney = 0;
      this.query.IsIncome = this.doctype;
      // 查询条件转化
      let queryKeysList = Object.keys(this.query);
      let search = {
        current: this.tableData.option.page,
        pageSize: this.tableData.option.pageSize,
        feeParams: [],
      };
      for (const iterator of queryKeysList) {
        if (this.query[iterator] !== "" && this.query[iterator] !== undefined) {
          let keyObject = {
            key: iterator,
            value: this.query[iterator],
          };
          search.feeParams.push(keyObject);
        }
      }
      if (this.checkIsIncome) {
        search.feeParams.splice(2, 1);
      }
      let res = await this.$http.post(
        "/api/docworkfee/selectDialogList",
        search
      );
      if (res.status) {
        res.data.content[0].list.forEach((item) => {
          item.recDate = item.recDate
            ? dayjs(item.recDate).format("YYYY-MM-DD")
            : "";
          item.etd = item.etd ? dayjs(item.etd).format("YYYY-MM-DD") : "";
          item.invoiceDate = item.invoiceDate
            ? dayjs(item.invoiceDate).format("YYYY-MM-DD")
            : "";
          item.createtime = item.createtime
            ? dayjs(item.createtime).format("YYYY-MM-DD HH:mm:ss")
            : "";
          item.workfeeId = item.id;
          delete item.id;
        });
        this.totalCountOfPay.unVerificationMoney =
          res.data.content[0].totalMoney;
        this.tableData.data = res.data.content[0].list;
        this.tableData.option.total = res.data.totalElements;
      } else {
        ElMessage.warning(res.message);
      }
      this.tableDataLoading = false;
    },

    // 复选框变动
    upDataOption(inOption) {
      this.totalCountOfPay.selctficationMoney = 0;
      this.totalCountOfPay.verificationMoney = 0;
      if (inOption.selected.length) {
        inOption.selected.forEach((item) => {
          const num = this.doctype == item.isIncome ? 1 : -1;
          this.totalCountOfPay.selctficationMoney += item.totalmoney
            ? parseFloat(item.totalmoney) * num
            : 0;
        });

        this.totalCountOfPay.verificationMoney = inOption.selected.reduce(
          (sum, e) => sum + Number(e.verificationMoney || 0),
          0
        );
      }
    },

    // 选中关闭
    async selectClose() {
      if (!this.tableData.option.selected.length) {
        this.$message.warning("请选择数据");
        return;
      }
      this.show = false;
      if (this.tableData.option.selected.length < 1) {
        vueBus.emit(
          "selectedOne",
          this.tableData.option.selected[0].getUnVerificationMoney
        );
      } else {
        let price = this.tableData.option.selected.reduce(
          (sum, e) => sum + Number(e.getUnVerificationMoney || 0),
          0
        );
        vueBus.emit("selectedOne", price);
      }
      this.$emit("selectOver", this.tableData.option.selected);
    },
  },
});
</script>

<style lang="scss">
.finacial-dailog {
  .el-dialog__header {
    border-bottom: 1px solid #e8e8e8;
  }

  .el-dialog {
    min-width: 630px;
  }
}
.colorRed {
  .el-table__cell {
    .cell {
      color: red;
    }
  }
}
.colorGreen {
  .el-table__cell {
    .cell {
      color: green;
    }
  }
}
</style>
<style lang="scss" scoped>
.from-container {
  border: 1px solid #e8e8e8;
  padding: 6px;
}

.btn-box {
  margin-top: 8px;
  margin-bottom: 8px;
}

:deep(.el-form-item--small .el-form-item__label) {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.85);
}

:deep(.el-form--inline .el-form-item) {
  display: flex;
  margin-right: 0;
}

:deep(.el-form-item--small.el-form-item) {
  margin-bottom: 8px;
}

:deep(.el-form--inline .el-form-item) {
  display: flex;
}
</style>
